<ion-header class="ion-header">
    <header-component>
        <ion-toolbar>
            <ion-buttons class="button-left">
                <img navBackButton src="assets/imgs/return.svg" alt="">
            </ion-buttons>
            <ion-title>{{ areaName }}</ion-title>
        </ion-toolbar>
    </header-component>
</ion-header>
<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event.target)">
        <ion-refresher-content pullingText="加载最新数据..."></ion-refresher-content>
    </ion-refresher>
    <div style="display:flex;flex-direction: column;height: 100%;">
        <!-- 房间内设备切换器 -->
        <nav-switch [navs]="deviceList" (navChange)="deviceChange($event)"></nav-switch>
        <ion-grid class="show-parameter-area" [ngClass]="{ 'devidce-online': onlineStatus}">
            <ion-row>
                <!-- 左侧参数-->
                <ion-col col-3 class="chart-left">
                    <ion-card [ngStyle]="{display: parameter && parameter.values.length ? 'block' : 'none'}" *ngFor="let parameter of parameterGroup.parameterGroup_1;let index = index" (click)="showDeviceParamesHistoryDataCurv(parameter)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameter.name }} {{ parameter.unit }}</div>
                            <div class="parames-value-color" *ngFor="let v of parameter.values" [ngClass]="{'red': v && v.hasAlarm}">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>

                    <!-- <ion-card *ngIf="parameterGroup_3 && parameterGroup_3.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_3)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_3.name }} {{ parameterGroup_3.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_3.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>

                    <ion-card *ngIf="parameterGroup_5 && parameterGroup_5.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_5)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_5.name }} {{ parameterGroup_5.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_5.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>

                    <ion-card *ngIf="parameterGroup_7 && parameterGroup_7.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_7)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_7.name }} {{ parameterGroup_7.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_7.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>

                    <ion-card *ngIf="parameterGroup_9 && parameterGroup_9.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_9)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_9.name }} {{ parameterGroup_9.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_9.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card> -->
                </ion-col>

                <ion-col col-6>
                    <!-- 告警状态-->
                    <p class="device-status" [ngClass]="{ 'slow' : showRateChart}">
                        <label *ngIf="hasAlarms && onlineStatus" style="color:#ff1919">当前运行异常</label>
                        <label *ngIf="!hasAlarms && onlineStatus" style="color:#1FB5FF">当前运行正常</label>
                    </p>

                    <!-- 中央图表 -->
                    <div id="deviceChart" style="text-align: center" *ngIf="showRateChart" (click)='showDeviceParamesHistoryDataCurv(parameterGroup_11)'></div>

                    <!-- 终于图片圆圈( 断线或者没有负载率时显示 ) -->
                    <div class="chart-circle" *ngIf="!showRateChart">
                        <img [src]="circleImgSrc" (error)="fixCircleImgSrc()" />
                    </div>
                </ion-col>


                <!-- 右侧参数-->
                <ion-col col-3 class="chart-right">
                    <!-- <ion-card *ngIf="parameterGroup_2 && parameterGroup_2.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_2)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_2.name }} {{ parameterGroup_2.unit }}</div>
                            <div *ngIf="parameterGroup_2.name !== '温湿度'">
                                <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_2.values">
                                    {{ v.value }}
                                </div>
                            </div> -->
                    <!-- 单独处理温湿度 -->
                    <!-- <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngIf="parameterGroup_2.name === '温湿度'">
                                {{ parameterGroup_2.values[0].value + '/' + parameterGroup_2.values[1].value }}
                            </div> -->
                    <!-- </ion-card-content>
                    </ion-card> -->

                    <ion-card [ngStyle]="{display: parameter && parameter.values.length ? 'block' : 'none'}" *ngFor="let parameter of parameterGroup.parameterGroup_2;let index = index" (click)="showDeviceParamesHistoryDataCurv(parameter)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameter.name }} {{ parameter.unit }}</div>
                            <div *ngIf="parameter.name !== '温湿度'">
                                <div class="parames-value-color" *ngFor="let v of parameter.values" [ngClass]="{'red': v && v.hasAlarm}">
                                    {{ v.value }}
                                </div>
                            </div>
                            <!-- 单独处理温湿度 -->
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngIf="parameter.name === '温湿度' && parameter.values.length">
                                {{ parameter.values[0].value + '/' + parameter.values[1].value }}
                            </div>
                        </ion-card-content>
                    </ion-card>

                    <!-- <ion-card *ngIf="parameterGroup_6 && parameterGroup_6.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_6)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_6.name }} {{ parameterGroup_6.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_6.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>
                    <ion-card *ngIf="parameterGroup_8 && parameterGroup_8.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_8)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_8.name }} {{ parameterGroup_8.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_8.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card>
                    <ion-card *ngIf="parameterGroup_10 && parameterGroup_10.values.length > 0" (click)="showDeviceParamesHistoryDataCurv(parameterGroup_10)">
                        <ion-card-content style="padding:0">
                            <div class="parameter-name">{{ parameterGroup_10.name }} {{ parameterGroup_10.unit }}</div>
                            <div class="parames-value-color" [ngClass]="{'red': v && v.hasAlarm}" *ngFor="let v of parameterGroup_10.values">
                                {{ v.value }}
                            </div>
                        </ion-card-content>
                    </ion-card> -->
                </ion-col>
            </ion-row>
        </ion-grid>

        <time-option [titles]="titles" [state]="state" (timeTypeChange)="onTimeTypeChange($event)"></time-option>

        <div echarts [options]="options" class="demo-chart"></div>

        <ion-row class="button-bar buttonThree-dt">
            <ion-col col-4 class="button" [ngClass]="{ chosen: b.state }" *ngFor="let b of buttonsData" (click)="toShowSubPage(b.id)">{{ b.name }}</ion-col>
        </ion-row>
    </div>
</ion-content>